<template>
  <el-aside class="main-sidebar" :width="isCollapse ? '4.0625rem' : '12.5rem'">
    <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        :router="true"
        @select="handleMenuSelect"
        background-color="#fff"
        text-color="#303133"
        active-text-color="#409EFF"
    >
      <el-menu-item index="/">
        <el-icon><HomeFilled /></el-icon>
        <template #title>首页</template>
      </el-menu-item>

      <template v-for="menu in menuList" :key="menu.path">
        <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.path">
          <template #title>
            <el-icon><component :is="menu.iconComponent" /></el-icon>
            <span style="font-size: 1.5rem;">{{ menu.title }}</span>
          </template>
          <el-menu-item v-for="child in menu.children" :key="child.path" :index="child.path">
            <template #title>{{ child.title }}</template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="menu.path">
          <el-icon><component :is="menu.iconComponent" /></el-icon>
          <template #title>{{ menu.title }}</template>
        </el-menu-item>
      </template>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { defineProps } from 'vue';

// 导入 Element Plus 图标组件
import {
  HomeFilled,       // 首页 (代替 fa fa-dashboard for homepage)
  Odometer,         // 仪表盘 (代替 fa fa-dashboard for dashboard)
  UserFilled,       // 用户 (代替 fa fa-user-md)
  Calendar,         // 日历 (代替 fa fa-foursquare, 适用于预约管理)
  FirstAidKit,      // 急救箱 (代替 fa fa-stethoscope, 适用于健康评估)
  TrendCharts,      // 趋势图 (代替 fa fa-heartbeat, 适用于统计分析)
} from '@element-plus/icons-vue';

// 定义接收来自父组件的 props
const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
});

const route = useRoute();

// 计算当前激活的菜单项
const activeMenu = computed(() => {
  return route.path;
});

const menuList = ref([
  {
    path: '1',
    title: '工作台',
    iconComponent: Odometer, // 使用 Element Plus 图标组件
    children: []
  },
  {
    path: '2',
    title: '会员管理',
    iconComponent: UserFilled, // 使用 Element Plus 图标组件
    children: [
      { path: '/2-1', title: '会员档案', linkUrl: 'all-medical-list.html', children: [] },
      { path: '/2-2', title: '体检预约', linkUrl: 'all-medical-list.html', children: [] },
      { path: '/2-3', title: '人员管理', linkUrl: 'all-medical-list.html', children: [] },
      { path: '/2-4', title: '健康管理', linkUrl: 'all-medical-list.html', children: [] }
    ]
  },
  {
    path: '3',
    title: '预约管理',
    iconComponent: Calendar, // 使用 Element Plus 图标组件
    children: [
      { path: '/ordersetting', title: '预约设置', linkUrl: 'ordersetting', children: [] },
      { path: '/setmeal', title: '套餐管理', linkUrl: 'setmeal', children: [] },
      { path: '/checkgroup', title: '检查组管理', linkUrl: 'checkgroup', children: [] },
      { path: '/checkitem', title: '检查项管理', linkUrl: 'checkitem', children: [] }
    ]
  },
  {
    path: '4',
    title: '健康评估',
    iconComponent: FirstAidKit, // 使用 Element Plus 图标组件
    children: [
      { path: '/4-1', title: '中医体质辨识', linkUrl: 'all-medical-list.html', children: [] }
    ]
  },
  {
    path: '5',
    title: '统计分析',
    iconComponent: TrendCharts, // 使用 Element Plus 图标组件
    children: [
      { path: '/5-1', title: '工作量统计', linkUrl: 'all-medical-list.html', children: [] }
    ]
  }
]);

// 菜单选择事件，如果 router 属性为 true，Element Plus 会自动处理路由跳转
const handleMenuSelect = (index, indexPath) => {
  console.log('Selected menu:', index, indexPath);
};
</script>

<style scoped>
.main-sidebar {
  position: fixed;
  top: 4.375rem; /* 70px / 16 = 4.375rem (header height) */
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: #fff;
  overflow-x: hidden;
  transition: width 0.3s ease;
  box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.1);
  height: calc(100vh - 4.375rem);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 12.5rem;
  min-height: 100%;
}

.el-menu {
  border-right: none;
}

.el-menu-item,
.el-sub-menu__title {
  height: 3.125rem !important;
  line-height: 3.125rem !important;
  font-size: 1.3rem;
}

/* 移除针对 Font Awesome 图标的特定样式 */
/* .el-menu-item i.fa,
.el-sub-menu__title i.fa {
  margin-right: 0.3125rem;
  font-size: 1.125rem;
  width: auto !important;
  text-align: center;
} */

/* Element Plus 图标组件的默认样式通常已经很好，如果需要调整间距，可以针对 .el-icon */
.el-menu-item .el-icon,
.el-sub-menu__title .el-icon {
  margin-right: 0.3125rem; /* 保持图标与文字的间距 */
  font-size: 1.125rem; /* 保持图标大小 */
}


.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-sub-menu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}

.el-menu--collapse .el-menu-item .el-icon,
.el-menu--collapse .el-sub-menu__title .el-icon {
  margin-right: 0px !important; /* 折叠时图标不应有右侧间距 */
}

.el-aside {
  overflow: hidden;
}

.el-submenu .el-menu-item a {
  display: block;
  height: 3.125rem;
}

.el-menu--collapse .el-submenu__icon-arrow {
  display: none;
}
</style>